<template>
  <div class="zw-create-frame">
    <div class="zw-create-frame-header">
      {{ props.title }}
    </div>
    <div class="zw-create-frame-form">
      <el-scrollbar :max-hight="scrollHeight">
        <slot></slot>
      </el-scrollbar>
    </div>
    <div class="zw-create-frame-buttons">
      <el-button type="primary" @click="emits('submit')">提交</el-button>
      <el-button v-if="!showReturn" @click="closePage">关闭</el-button>
      <el-button v-else @click="returnPrev">返回</el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import ElConfirm from '../ElConfirm';

const props = withDefaults(defineProps<{
  title: string,
  showReturn?: boolean
}>(), {
  title: "",
  showReturn: false,
})
const emits = defineEmits(["submit"])
const scrollHeight = computed(() => {
  return window.innerHeight - 64 - 48 - 24; // 高度-头-底部-padding*2
});
const closePage = () => {
  ElConfirm("确定要关闭页面吗？").then(() => {
    window.close();
  }).catch();
}
const returnPrev = () => {
  ElConfirm("确定要返回上一页吗？").then(() => {
    history.back();
  }).catch();
}
</script>
<style lang="scss" scope>
.zw-create-frame {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  &-header {
    height: 64px;
    line-height: 64px;
    text-align: center;
    font-size: 24px;
    color: #fff;
    font-weight: 600;
    background-image: url("@/assets/headerbg.png");
    background-size: cover;
    background-repeat: no-repeat;
  }

  &-form {
    flex: 1;
    overflow: hidden;
    padding: 12px 20%;
  }

  &-buttons {
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

}
</style>
